var modelAttribute = $("#attribute").val();
const val = eval("(" + modelAttribute + ")");

//血压
var myChart = echarts.init(document.getElementById('bar1-chart'));
// 指定图表的配置项和数据
var option = {

    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['舒张压', '收缩压']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [val[0].collectionTime, val[1].collectionTime, val[2].collectionTime, val[3].collectionTime, val[4].collectionTime, val[5].collectionTime, val[6].collectionTime]
    },
    yAxis: [
        {
            name: 'mmHg',
            type: 'value'
        }
    ],
    series: [
        {
            name: '舒张压',
            type: 'line',
            stack: '总量',
            data: [val[0].bloodPressureDiastolic, val[1].bloodPressureDiastolic, val[2].bloodPressureDiastolic, val[3].bloodPressureDiastolic, val[4].bloodPressureDiastolic, val[5].bloodPressureDiastolic, val[6].bloodPressureDiastolic]
        },
        {
            name: '收缩压',
            type: 'line',
            stack: '总量',
            data: [val[0].bloodPressureSystolic, val[1].bloodPressureSystolic, val[2].bloodPressureSystolic, val[3].bloodPressureSystolic, val[4].bloodPressureSystolic, val[5].bloodPressureSystolic, val[6].bloodPressureSystolic]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

//睡眠
var myChart1 = echarts.init(document.getElementById('bar4-chart'));

var dataAxis = [val[0].collectionTime, val[1].collectionTime, val[2].collectionTime, val[3].collectionTime, val[4].collectionTime, val[5].collectionTime, val[6].collectionTime];
var data = [val[0].sleepQuality, val[1].sleepQuality, val[2].sleepQuality, val[3].sleepQuality, val[4].sleepQuality, val[5].sleepQuality, val[6].sleepQuality];
var yMax = 10;
var dataShadow = [];

for (var i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
}

option1 = {
    xAxis: {
        data: dataAxis,
        axisLabel: {
            inside: true,
            textStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        name: '小时',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                color: 'rgba(0,0,0,0.05)'
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: dataShadow,
            animation: false
        },
        {
            type: 'bar',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
            data: data
        }
    ]
};

// Enable data zoom when user click bar.
var zoomSize = 6;
myChart1.on('click', function (params) {
    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    myChart1.dispatchAction({
        type: 'dataZoom',
        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    });
});

// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);

//血糖
var myChart2 = echarts.init(document.getElementById('bar2-chart'));
// 指定图表的配置项和数据
var option2 = {

    tooltip: {
        trigger: 'axis'
    },

    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [val[0].collectionTime, val[1].collectionTime, val[2].collectionTime, val[3].collectionTime, val[4].collectionTime, val[5].collectionTime, val[6].collectionTime]
    },
    yAxis: {
        name:'mmol/l',
        type: 'value'
    },
    series: [
        {
            name: '血压',
            type: 'line',
            stack: '总量',
            data: [val[0].bloodSugar, val[1].bloodSugar, val[2].bloodSugar, val[3].bloodSugar, val[4].bloodSugar, val[5].bloodSugar, val[6].bloodSugar]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option2);

//心跳
var myChart3 = echarts.init(document.getElementById('bar3-chart'));
// 指定图表的配置项和数据
option3 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#283b56'
            }
        }
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    dataZoom: {
        show: false,
        start: 0,
        end: 100
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: true,
            data: (function (){
                var now = new Date();
                var res = [];
                var len = 10;
                while (len--) {
                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                    now = new Date(now - 2000);
                }
                return res;
            })()
        }
    ],
    yAxis: [
        {
            type: 'value',
            scale: true,
            max: 120,
            min: 0,
            boundaryGap: [0.2, 0.2]
        }
    ],
    series: [

        {
            name: '最新成交价',
            type: 'line',
            data: (function (){
                var res = [];
                var len = 0;
                while (len < 10) {
                    res.push(Math.floor(Math.random()*(90-50+1)+50));
                    len++;
                }
                return res;
            })()
        }
    ]
};


setInterval(function (){
    var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

    var data0 = option3.series[0].data;

    data0.shift();
    data0.push(Math.floor(Math.random()*(90-50+1)+50));

    option3.xAxis[0].data.shift();
    option3.xAxis[0].data.push(axisData);


    myChart3.setOption(option3);
}, 2100);

myChart3.setOption(option3);
